import React from 'react';
import { Card, Row, Col, Descriptions, Avatar, Tabs, List, Tag, Button } from 'antd';
import { UserOutlined, EditOutlined } from '@ant-design/icons';
import { Typography } from 'antd';

const { Title, Text } = Typography;
const { TabPane } = Tabs;

const data = [
  {
    title: '系统通知',
    description: '系统将于2023-12-31 02:00进行升级维护。',
    time: '2小时前',
  },
  {
    title: '账户安全',
    description: '您的账户在2023-11-15 14:30有新的登录。',
    time: '1天前',
  },
  {
    title: '版本更新',
    description: '新版本v1.2.0已发布，点击查看更新内容。',
    time: '3天前',
  },
];

const Center: React.FC = () => {
  return (
    <div className="account-center">
      <Row gutter={[16, 16]}>
        <Col xs={24} md={8}>
          <Card>
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <Avatar size={104} icon={<UserOutlined />} style={{ marginBottom: 16 }} />
              <Title level={4} style={{ marginBottom: 8 }}>用户名</Title>
              <Text type="secondary">前端开发工程师</Text>
            </div>
            
            <Descriptions column={1} bordered>
              <Descriptions.Item label="邮箱">user@example.com</Descriptions.Item>
              <Descriptions.Item label="手机">138****1234</Descriptions.Item>
              <Descriptions.Item label="部门">技术部 - 前端组</Descriptions.Item>
              <Descriptions.Item label="注册时间">2023-01-15</Descriptions.Item>
              <Descriptions.Item label="个人简介">
                这个人很懒，什么都没有留下
              </Descriptions.Item>
            </Descriptions>

            <Button 
              type="primary" 
              block 
              style={{ marginTop: 16 }}
              icon={<EditOutlined />}
            >
              编辑个人资料
            </Button>
          </Card>
        </Col>

        <Col xs={24} md={16}>
          <Card>
            <Tabs defaultActiveKey="1">
              <TabPane tab="我的通知" key="1">
                <List
                  itemLayout="horizontal"
                  dataSource={data}
                  renderItem={(item) => (
                    <List.Item>
                      <List.Item.Meta
                        title={item.title}
                        description={
                          <div>
                            <div>{item.description}</div>
                            <Text type="secondary" style={{ fontSize: 12 }}>{item.time}</Text>
                          </div>
                        }
                      />
                    </List.Item>
                  )}
                />
              </TabPane>
              <TabPane tab="我的项目" key="2">
                <div style={{ textAlign: 'center', color: '#999', padding: '40px 0' }}>
                  暂无项目数据
                </div>
              </TabPane>
              <TabPane tab="我的标签" key="3">
                <div style={{ marginBottom: 16 }}>
                  <Title level={5} style={{ marginBottom: 12 }}>技能标签</Title>
                  <div>
                    <Tag color="blue">React</Tag>
                    <Tag color="cyan">TypeScript</Tag>
                    <Tag color="purple">Ant Design</Tag>
                    <Tag color="green">Node.js</Tag>
                    <Tag color="orange">Webpack</Tag>
                  </div>
                </div>
                <div>
                  <Title level={5} style={{ marginBottom: 12 }}>兴趣爱好</Title>
                  <div>
                    <Tag color="magenta">音乐</Tag>
                    <Tag color="red">旅游</Tag>
                    <Tag color="volcano">摄影</Tag>
                    <Tag color="gold">阅读</Tag>
                  </div>
                </div>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Center;
